<template>
  <div class="input-container">
    <div class="input-title">
      <img src="@/assets/logo_back.png" class="title_back" @click="handleBack" />
      <span class="title_text">重置密码</span>
    </div>

    <div class="input-text">
      <p class="text-tips" style="margin: 32px 0 10px">新密码</p>
      <a-input-password
        class="input-name"
        v-model="form.password"
        placeholder="请输入新密码"
        :class="{ 'input-name-error': !passwordInputStatus }"
        :max-length="20"
        @blur="checkRule"
      />
      <div class="error-text" v-if="!passwordInputStatus">密码格式不正确</div>

      <p class="text-tips" style="margin: 20px 0 10px">确认密码</p>
      <div style="position: relative">
        <a-input-password
          class="input-name"
          v-model="form.surePassword"
          placeholder="请输入确认密码"
          :class="{ 'input-name-error': !surePasswordInputStatus }"
          :max-length="20"
          @blur="checkSurePassword"
        />
      </div>
      <div class="error-text" v-if="!surePasswordInputStatus">确认密码与新密码不一致</div>
    </div>

    <div class="submit-operate">
      <button class="submit-btn" @click="handleSubmit" :disabled="!form.password || !form.surePassword">提交</button>
    </div>
    <div class="conclusion">
      <img src="@/assets/point.png" />
      <span>密码8~16位，支持数字、字母、特殊符号(!~_%$&*)、区分大小写</span>
    </div>
  </div>
</template>

<script setup>
  import { ref } from 'vue'
  import { resetPassword } from '@/api/user'
  import { Message } from '@arco-design/web-vue'

  const emit = defineEmits(['changeIndex'])

  const props = defineProps({
    // 上一步的手机号和验证码
    forgetForm: Object,
  })

  //  返回上一步
  const handleBack = () => {
    emit('changeIndex', 2)
  }

  // 校验密码规则
  const reg = /^(?=.*\d)(?=.*[a-zA-Z])(?=.*[!~_%&*(),.@#$^])[\da-zA-Z!~_%&*/(),.@#$^]{8,16}$/
  const passwordInputStatus = ref(true)
  const checkRule = () => {
    if (reg.test(form.value.password)) {
      passwordInputStatus.value = true
    } else {
      passwordInputStatus.value = false
    }
  }
  const surePasswordInputStatus = ref(true)
  const checkSurePassword = () => {
    if (form.value.password && form.value.password != form.value.surePassword) {
      surePasswordInputStatus.value = false
    } else {
      surePasswordInputStatus.value = true
    }
  }

  //  重置密码 - 提交
  const form = ref({})
  const handleSubmit = () => {
    if (!passwordInputStatus.value || !surePasswordInputStatus.value) {
      Message.warning('请输入正确的密码')
      return
    }
    resetPassword({
      ...props.forgetForm,
      password: form.value.password,
    }).then((res) => {
      if (res.code == 200) {
        if (res.result.status) {
          Message.success('重置成功')
          emit('changeIndex', 1)
        } else {
          Message.error(res.result.message)
        }
      }
    })
  }
</script>

<style lang="less" scoped>
  .text-tips {
    height: 22px;
    font-size: 14px;
    font-weight: 400;
    color: #86909c;
    line-height: 22px;
  }
  .input-container {
    width: 398px;
    margin: auto;
    .img-verify {
      display: flex;
    }
    .input-title {
      display: flex;
      align-items: center;
      margin-left: -4px;

      .title_back {
        margin-right: 12px;
        width: 48px;
        height: 48px;
        cursor: pointer;
        &:hover {
          opacity: 0.8;
        }
      }
      .title_text {
        font-size: 32px;
        font-weight: 600;
        color: #1e1e1e;
      }
    }
    .input-text {
      .input-name {
        width: 398px;
        height: 50px;
        border-radius: 3px 3px 3px 3px;
        font-size: 14px;
        font-weight: 400;
        opacity: 1;
        border: 1px solid #c5c6cd;
        outline-style: none;
        padding-top: 14px;
        padding-bottom: 14px;
        padding-left: 18px;
      }
      .input-name:focus {
        outline: none;
        border: 1px solid #165dff;
      }
      .input-name-error {
        outline: none;
        border: 1px solid #ff5b5a;
      }
    }
    .submit-operate {
      margin-top: 52px;
      .submit-btn {
        width: 398px;
        height: 50px;
        font-size: 16px;
        color: #ffffff;
        border-radius: 2px;
        background: #165dff;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        font-weight: 400;
        line-height: 50px;
        &:disabled {
          background: rgba(22, 93, 255, 0.3);
        }
      }
    }
    .conclusion {
      margin-top: 24px;
      display: flex;
      justify-content: center;
      align-items: center;
      img {
        width: 15px;
        margin-right: 3px;
      }
      font-size: 14px;
      font-weight: 400;
      color: #1e1e1e;
      white-space: nowrap;
    }
  }

  .error-text {
    height: 22px;
    font-size: 14px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #ff5b5a;
    line-height: 22px;
    margin-top: 11px;
  }
</style>
